<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title> Exemplo de uso de Mapa </title>
        <script src="http://maps.google.com/maps/api/js?sensor=false"
                type="text/javascript"></script>
        <script type="text/javascript">  
            var currentMarker = null;  
  
            function handlePointClick(event) {  
                if(currentMarker === null) {  
                    document.getElementById('lat').value = event.latLng.lat();  
                    document.getElementById('lng').value = event.latLng.lng();  
  
                    currentMarker = new google.maps.Marker({  
                        position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())  
                    });  
  
                    PF('map').addOverlay(currentMarker);  
  
                    PF('dlg').show();  
                }     
            }  
  
            function markerAddComplete() {  
                var title = document.getElementById('title');  
                currentMarker.setTitle(title.value);  
                title.value = "";  
  
                currentMarker = null;  
                PF('dlg').hide();  
            }  
  
            function cancel() {  
                PF('dlg').hide();  
                currentMarker.setMap(null);  
                currentMarker = null;  
  
                return false;  
            }  
        </script>  
    </h:head>
    <h:body>
<!--        <p:growl id="messages" showDetail="true" />  -->
        <link href="#{request.contextPath}/resources/style.css" rel="stylesheet" type="text/css" />
        
        <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"   
                style="width:100%;height:100%"  
                model="#{mapBean1.emptyModel}"   
                onPointClick="handlePointClick(event);"   
                widgetVar="map"> 
        
<!--        <p:ajax event="overlaySelect" listener="# {mapBean.onMarkerSelect}" />  
            <p:ajax event="pointSelect" listener="# {mapBean.getEnderecoPorLatitudeLongitude}"  
                    update=":conteudo:dialogdocao" oncomplete="dlg.show()"/> 

            <p:gmapInfoWindow>  
                <p:outputPanel style="text-align:center;display:block;margin:auto:">  
                    <h:outputText value="# {mapBean.marker.title}" />
                </p:outputPanel>  
            </p:gmapInfoWindow>  -->
            
        </p:gmap>  

        <p:dialog widgetVar="dlg" showEffect="fade">  
            <h:form prependId="false">  
                <h:panelGrid columns="2">  
                    <h:outputLabel for="title" value="Title:" />  
                    <p:inputText id="title" value="#{mapBean1.title}" />  

                    <f:facet name="footer">  
                        <p:commandButton value="Add" actionListener="#{mapBean1.addMarker}" 
                                         oncomplete="markerAddComplete()" />  
                        <p:commandButton value="Cancel" onclick="return cancel()"/>  
                    </f:facet>  
                </h:panelGrid>  

                <h:inputHidden id="lat" value="#{mapBean1.lat}" />  
                <h:inputHidden id="lng" value="#{mapBean1.lng}" />  
            </h:form>  
        </p:dialog>
    </h:body>

</f:view>